import { useState, useEffect, useRef } from 'react';

/**
 * 管理工具栏状态的自定义 Hook
 */
export const useToolbar = () => {
  const [toolbarVisible, setToolbarVisible] = useState(false);
  const [toolbarWidth, setToolbarWidth] = useState(600); // 默认宽度，更宽以提供更好的可视化体验
  const [activeTool, setActiveTool] = useState<string | null>(null);
  const [isResizing, setIsResizing] = useState(false);
  const toolbarRef = useRef<HTMLDivElement>(null);
  const resizeRef = useRef<HTMLDivElement>(null);

  // 切换工具栏显示
  const handleToggleToolbar = () => {
    setToolbarVisible(!toolbarVisible);
    if (!toolbarVisible) {
      // 如果正在打开，默认选择第一个工具（输入参数）
      if (!activeTool) {
        setActiveTool('parameters');
      }
    }
  };

  // 关闭工具栏
  const handleCloseToolbar = () => {
    setToolbarVisible(false);
    setActiveTool(null);
  };

  // 选择工具
  const handleToolSelect = (tool: string) => {
    setActiveTool(tool);
  };

  // 处理拖拽调整大小
  useEffect(() => {
    if (!isResizing) return;

    const handleMouseMove = (e: MouseEvent) => {
      // 基于鼠标位置计算新宽度（从右边界到鼠标位置）
      const newWidth = window.innerWidth - e.clientX;
      // 限制最小宽度为300px，确保工具栏有足够的显示空间
      // 同时确保主内容区域最小宽度为800px（考虑左侧300px实验列表）
      const leftSidebarWidth = 300; // 左侧实验列表宽度
      const minContentWidth = 800; // 主内容区域最小宽度
      const minToolbarWidth = 300; // 工具栏最小宽度
      // 工具栏最大宽度 = 窗口宽度 - 左侧栏 - 主内容区域最小宽度
      const maxToolbarWidth = window.innerWidth - leftSidebarWidth - minContentWidth;
      const clampedWidth = Math.max(minToolbarWidth, Math.min(maxToolbarWidth, newWidth));
      setToolbarWidth(clampedWidth);
    };

    const handleMouseUp = () => {
      setIsResizing(false);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizing]);

  return {
    toolbarVisible,
    toolbarWidth,
    activeTool,
    isResizing,
    toolbarRef,
    resizeRef,
    handleToggleToolbar,
    handleCloseToolbar,
    handleToolSelect,
    setIsResizing,
  };
};

